<template>
    <div class='home-footer'>
        <ul>
            <li @click="goMy">
                <span>我的</span>
            </li>
            <li @click="topic">
                <span>资讯</span>
            </li>
            <li @click="goPlan">
                <span>计划</span>
            </li>
        </ul>
    </div>
</template>

<script>

export default {
    name:'HomeFooter',
    methods: {
        goMy() {
            //对应跳转页面
            this.$router.push('/my');
        },
        goPlan() {
            this.$router.push('/plan');
        },
        topic() {
            this.$router.push('/news');
        }
    }
}
</script>

<style lang="scss" scoped>
/* 必须使用~ 才可以使用别名 */
@import '~styles/mixins.scss';
@import '~styles/variables.scss';
.home-footer{
    @include flex-row;
	height: $headerHeight;
	background-color: $defaultBgColor;
    border-top: 1px solid #ccc;
    font-size: .16rem;
    color:#fff;

    ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;

        li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

            span {
                font-size: .16rem;
            }
        }
    }
}

</style>
